<template>
  <div class="classroom-container">
    <h3>{{ pageTitle }}</h3>
    <div class="classroom-filter">
      <el-form ref="filterFormRef" :model="filterForm" @submit.native.prevent>
        <div v-show="!isRetract">
          <el-form-item label="学段">
            <el-radio-group v-model="filterForm.period" @input="handleFilter">
              <el-radio-button v-for="dict in dict.type.period" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年级">
            <el-radio-group v-model="filterForm.grade" @input="handleFilter">
              <el-radio-button v-for="dict in dict.type.grade" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学科">
            <el-radio-group v-model="filterForm.subject" @input="handleFilter">
              <el-radio-button v-for="dict in dict.type.subject" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="版本">
            <el-radio-group v-model="filterForm.version" @input="handleFilter">
              <el-radio-button v-for="dict in dict.type.version" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="册次">
            <el-radio-group v-model="filterForm.volume" @input="handleFilter">
              <el-radio-button v-for="dict in dict.type.volume" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="课程名称"  class="filter-name">
          <el-input v-model="filterForm.videoName" style="width: 300px; margin-right: 20px" maxlength="30"
                    placeholder="请输入课程名称" clearable></el-input>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="text" class="retract-btn" :class="{'is-retract': isRetract}"
                 @click="isRetract = !isRetract">{{ isRetract ? '展开' : '收起' }}<img src="../assets/icons/arrow-down.png"></el-button>
    </div>
    <List ref="list" :dataList="courseList" @refresh="getList"
          @sort="orderBy" v-loading="loading" />
  </div>
</template>

<script>
import List from '../components/courseList'
// eslint-disable-next-line import/no-cycle
import { cloud } from '@/framework/utils/request'
import { getOnlinePage } from '@/api/classroom/videoReview'
import { mapGetters } from 'vuex'

export default {
  name: 'ClassroomCourse',
  components: { List },
  data() {
    return {
      // 遮罩层
      loading: true,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        period: '',
        grade: '',
        subject: '',
        version: '',
        volume: '',
        videoName: '',
        menuId: '',
        sortBy: 'DESC'
      },
      menuId: '',
      isRetract: false,
      activeTab: '1',
      total: 0,
      current: 1,
      courseList: [],
      pageTitle: ''
    }
  },
  computed: {
    ...mapGetters(['onlineStudy'])
  },
  watch: {
    '$route.query.menuId': {
      handler(menuId) {
        this.filterForm.menuId = menuId
        this.menuId = menuId
        const routeObj = this.onlineStudy.find((item) => item.menuId == this.$route.query.menuId)
        this.pageTitle = routeObj && routeObj.menuName
        this.reset()
        this.getList()
      },
      immediate: true
    }
  },
  dicts: ['period', 'grade', 'subject', 'version', 'volume'],
  // mounted() {
  //   this.getList()
  // },
  methods: {
    getList(page) {
      this.loading = true
      getOnlinePage({ ...this.filterForm, ...page }).then(({ data: response }) => {
        this.courseList = response.rows.map((item) => {
          item.coverUrl = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${item.coverId}`
          item.likeNum = item.likeNum ? item.likeNum : 0
          return item
        })
        this.total = response.totalRows
        this.$refs.list.total = response.totalRows
      }).finally(() => {
        this.loading = false
      })
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.reset()
      this.handleFilter()
    },
    reset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 10,
        period: '',
        grade: '',
        subject: '',
        version: '',
        volume: '',
        videoName: '',
        menuId: this.menuId,
        sortBy: 'DESC'
      }
    },
    // 智能排序
    orderBy() {
      if (this.filterForm.sortBy == 'DESC') {
        this.filterForm.sortBy = 'ASC'
      } else {
        this.filterForm.sortBy = 'DESC'
      }
      this.filterForm.pageNo = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-container {
  min-height: 100%;
  padding: 20px;
  h3 {
    font-family: "Source Han Sans CN Medium";
    font-weight: 600;
    font-size: 24px;
    text-align: left;
    color: #00080f;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom: 20px;
  }
  .classroom-filter {
    position: relative;
    width: 100%;
    // min-height: 258px;
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border-radius: 4px;
    // background: url("../assets/img/onlinestudy-filter-bg.png") no-repeat;
    // background-size: cover;
    padding: 20px;
    margin-bottom: 20px;
    .retract-btn {
      position: absolute;
      top: 17px;
      right: 34px;
      cursor: pointer;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 20px;
      color: #00080f;
      img {
        position: relative;
        margin-left: 6px;
        transform: rotate(180deg);
        top: -2px;
      }
    }
    .is-retract {
      img {
        transform: rotate(360deg);
      }
    }
    .el-form-item {
      margin-bottom: 18px;
    }
    .filter-name {
      margin-bottom: 0;
    }
    // .el-form-item:last-child {
    //   margin-bottom: 0;
    // }
  }
}
</style>
<style lang="scss">
.classroom-container {
  .classroom-filter {
    .el-form-item__label {
      line-height: 28px;
      font-family: "Source Han Sans CN";
      font-size: 16px;
      color: #00080f;
      padding-right: 37px;
    }
    .filter-name {
      .el-form-item__label {
        line-height: 36px;
        padding-right: 12px;
      }
    }
    .el-form-item--medium .el-form-item__content {
      line-height: 20px;
    }
    .el-radio-button__inner {
      font-family: "Source Han Sans CN";
      font-weight: 500;
      font-size: 16px;
      color: #808080;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      border-radius: 4px;
      background: #edf2fc;
      color: #004fff;
      box-shadow: none;
    }
    .el-radio-button {
      font-family: "Source Han Sans CN";
      font-size: 16px;
      margin-right: 29px;
    }
    .el-radio-button--medium .el-radio-button__inner {
      padding: 6px 13px;
      border: none;
    }
  }
}
</style>
